window.onload = function() {

    // 获取form
    var form = document.querySelector('.body .bd .bd_bj_body form');

    // 获取用户名
    var uname = document.querySelectorAll('.body .bd .bd_bj_body form input')[0];

    // 获取密码
    var pass = document.querySelectorAll('.body .bd .bd_bj_body form input')[1];

    // 提示信息
    var tip = document.querySelector('.body .bd .bd_bj_body form .tip');

    // 清空表单值
    var del = document.querySelectorAll('.body .bd .bd_bj_body form>span');

    // 获取label
    var labels = document.querySelectorAll('.body .bd .bd_bj_body form label')

    for(var a = 0; a < del.length; a++) {
        (function(a) {  
            del[a].onmousedown = function() {
                console.log(document.querySelectorAll('.body .bd .bd_bj_body form input')[a]);
                document.querySelectorAll('.body .bd .bd_bj_body form input')[a].value = '';
            }
        })(a)
    }

    for(let x = 0; x < labels.length; x++) {
        labels[x].onclick = function() {
            labels[x].style['background-color'] = '#e8e8e8';
        }
    }

    function fn(c, text, flag = false) {
        c.onfocus = function() {
            if(this.value === text) {
                this.value = '';
            }
            if(flag) {
                this.type = 'password';
                labels[1].style['background-color'] = '#e8e8e8';
                del[1].style.display = 'block';
            } else {
                labels[0].style['background-color'] = '#e8e8e8';
                del[0].style.display = 'block';
            }
        }

        c.onblur = function() {
            for(let x = 0; x < labels.length; x++) {
                labels[x].style['background-color'] = '#f4f4f4';
                del[x].style.display = 'none';
            }
            if(!(this.value)) {
                this.value = text;
                if(flag) {
                    this.type = 'text'
                }
            }
        }
    }

    fn(uname, '用户名')
    fn(pass, '密码', true)

    // uname.onfocus = function() {
    //     if(this.value === '用户名') {
    //         this.value = '';
    //     }
    // }

    // uname.onblur = function() {
    //     if(!(this.value)) {
    //         this.value = '用户名';
    //     }
    // }

    // pass.onfocus = function() {
    //     if(this.value === '密码') {
    //         this.value = '';
    //     }
    //     this.type = 'password'
    // }

    // pass.onblur = function() {
    //     if(!(this.value)) {
    //         this.value = '密码';
    //         this.type = 'text'
    //     }
    // }

    form.addEventListener('submit', submit);
    function submit() {
        // 阻止表单默认行为
        window.event.returnValue = false;

        // 发送ajax请求
        // 创建ajax对象
        var xhr = new XMLHttpRequest();

        // 设置请求信息
        xhr.open('post', 'http://localhost:8888/users/login', true);

        // 设置头信息 头信息必须要在send发送请求之前
        xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');

        // 发送请求时的携带的验证参数
        var params = `username=${uname.value}&password=${pass.value}` 

        // 监听请求
        xhr.onreadystatechange = function() {
            // ajax请求状态
            if(xhr.readyState === 4) {
                // http请求状态
                if(parseInt(xhr.status / 100) === 2) {
                    // 接收对方相应的数据 看send携带的参数是否匹配成功  匹配成功返回数据 失败则返回提示信息
                    var res = xhr.responseText;
                    res = JSON.parse(res);
                    // alert('ni ')
                    var {code} = res;

                    if(code ===1) {
                        var date = new Date();
                        date.setTime(date.getTime() - 8*3600*1000 + 3600 * 1000 * 2);
                        document.cookie = `username=${uname.value}; expires=${date}; path=/`;
                        document.cookie = `numbe=1350827; expires=${date}; path=/`
                        location.href = '../index.html'
                    } else {
                        tip.style.visibility = 'visible'
                    }
                }
            }
        }

        // 发送请求
        xhr.send(params)
    }
}